<template>
    <div>
        <van-tabs v-model="active" title-active-color="#2A9CFF" animated>
            <van-tab title="手写教案">
                <header>
                    <input type="text" placeholder="搜索用户名、课程">
                    <div class="boxss">
                        <div class="right">
                            <img src="img/shaixuanya@2x.png" alt="">
                            <span>区域</span>
                        </div>
                         <div style="margin-left:0.1rem" class="right">
                            <img src="img/shaixuanya@2x.png" alt="">
                            <span>课程</span>
                        </div>
                    </div>
                    
                    <van-icon class="icon" name="search" />
                </header>
                <ul>
                    <li>
                        <div class="top">
                            <div class="right">
                                <div class="img">
                                    <img src="img/touxiang7@2x.png" alt="">
                                </div>
                                <div class="message">
                                    <div class="name">于海洋 <span>(雨涵小区)</span></div>
                                    <div class="lesson">WeDo编程-闯关小车-点名答到环节</div>
                                </div>
                            </div>
                            
                            <div class="shear">
                                <img src="img/fenxianga@2x.png" alt="">
                                <span>分享</span>
                            </div>
                        </div>
                        <div class="video">
                            <div class="item"><img src="img/shipinkaobei.png" alt=""></div>
                        </div>
                        <div class="bottom">
                            2020.01.01
                        </div>
                    </li>
                </ul>
            </van-tab>
            <van-tab title="备课视频">
                <header>
                    <input type="text" placeholder="搜索用户名、课程">
                    <div class="boxss">
                        <div class="right">
                            <img src="img/shaixuanya@2x.png" alt="">
                            <span>区域</span>
                        </div>
                         <div style="margin-left:0.1rem" class="right">
                            <img src="img/shaixuanya@2x.png" alt="">
                            <span>课程</span>
                        </div>
                    </div>
                    
                    <van-icon class="icon" name="search" />
                </header>
                <ul>
                    <li>
                        <div class="top">
                            <div class="right">
                                <div class="img">
                                    <img src="img/touxiang7@2x.png" alt="">
                                </div>
                                <div class="message">
                                    <div class="name">于海洋 <span>(雨涵小区)</span></div>
                                    <div class="lesson">WeDo编程-闯关小车-点名答到环节</div>
                                </div>
                            </div>
                            
                            <div class="shear">
                                <img src="img/fenxianga@2x.png" alt="">
                                <span>分享</span>
                            </div>
                        </div>
                        <div class="video">
                            <div class="item"><img src="img/shipinkaobei.png" alt=""></div>
                        </div>
                        <div class="bottom">
                            2020.01.01
                        </div>
                    </li>
                </ul>
            </van-tab>
            <van-tab title="精彩视频">
                <header>
                    <input type="text" placeholder="搜索用户名、课程">
                    <div class="boxss">
                        <div class="right">
                            <img src="img/shaixuanya@2x.png" alt="">
                            <span>区域</span>
                        </div>
                         <div style="margin-left:0.1rem" class="right">
                            <img src="img/shaixuanya@2x.png" alt="">
                            <span>课程</span>
                        </div>
                    </div>
                    
                    <van-icon class="icon" name="search" />
                </header>
                <ul>
                    <li>
                        <div class="top">
                            <div class="right">
                                <div class="img">
                                    <img src="img/touxiang7@2x.png" alt="">
                                </div>
                                <div class="message">
                                    <div class="name">于海洋 <span>(雨涵小区)</span></div>
                                    <div class="lesson">WeDo编程-闯关小车-点名答到环节</div>
                                </div>
                            </div>
                            
                            <div class="shear">
                                <img src="img/fenxianga@2x.png" alt="">
                                <span>分享</span>
                            </div>
                        </div>
                        <div class="video">
                            <div class="item"><img src="img/shipinkaobei.png" alt=""></div>
                        </div>
                        <div class="bottom">
                            2020.01.01
                        </div>
                    </li>
                </ul>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active:'',
            tabs:['']
        }
    },
}
</script>
<style lang="scss" scoped>
    /deep/ .van-tabs__line{
        background:#2A9CFF ;
    }
    .icon{
        position: absolute;
        left: 0.3rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.3rem;
    }
    header{
        padding: 0.1rem 0.2rem;
        box-sizing: border-box;
        position: relative;
        background:#F7F9FA;
        justify-content: space-between;
        display: flex;
        align-items: center;
        input{
            // width: 5.6rem;'
            flex: 1;
            height: 0.4rem;
            border-radius: 0.2rem;
            background: white;
            border: none;
            font-size: 0.22rem;
            padding-left: 0.5rem;
            box-sizing: border-box;
            color: #9C9C9C;
        }
        .boxss{
            display: flex;
            align-items: center;
            // flex: 1;
            flex-wrap: nowrap;
            margin-left: 0.1rem;
        }
        .right{
            width: 1.2rem;
            height: 0.4rem;
            border: 0.01rem solid #C3C3C3;
            border-radius: 0.2rem;
            padding:0.1rem 0.2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #343434;
            img{
                width: 0.22rem;
                height: 0.22rem;
            }
        }
    }
    ul{
        padding: 0 0.24rem;
        box-sizing: border-box;
        li{
            margin-top: 0.22rem;
            border-bottom: 0.01rem solid #eee;
            .top{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .right{
                    display: flex;
                    align-items: center;
                    .img{
                        width: 0.72rem;
                        height: 0.72rem;
                        border-radius: 50%;
                        img{
                            width: 100%;
                            height: 100%;
                            display: block;
                        }
                    }
                    .message{
                        margin-left: 0.17rem;
                        .name{
                            font-size: 0.26rem;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #343434;
                        }
                        .lesson{     
                            font-size: 0.22rem;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #FA742B;
                            margin-top: 0.08rem;
                        }
                    }
                }
                .shear{
                   width: 1.02rem;
                    height: 0.4rem;
                    padding: 0 0.1rem;
                    box-sizing: border-box;
                    justify-content: space-between;
                    background: #2E9EFF;
                    border-radius: 0.06rem; 
                    display: flex;
                    align-items: center;
                    font-size: 0.18rem;
                    font-family: PingFang SC;
                    // font-weight: bold;
                    color: #FEFEFE;
                    img{
                        width: 0.18rem;
                        height: 0.18rem;
                    }
                    span{
                        margin-left: 0.06rem;
                    }
                }
            }
            .video{
                margin-left: 0.9rem;
                margin-top: 0.2rem;
                .item{
                    width: 1.44rem;
                    height: 1.44rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .bottom{
                margin-top: 0.27rem;
                font-size: 0.2rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #7E7E7E;
                margin-left: 0.9rem;
                padding-bottom: 0.3rem;
            }
        }
    }
    .boxs{
        display: flex;
        align-items: center;
        margin-left: 0.2rem;
    }
</style>